<template>
  <div class="edit-pro">
    <!--    <div fz-16 center>编辑作品</div>-->
    <div ww3 auto>
      <el-page-header @back="goBack" content="申请开票">
      </el-page-header>
    </div>



    <div class="edit-form" auto style="width: 70%">
      <p fz-14 red style="margin-bottom: 20px">申请发票金额（含税）1元</p>
      <el-tag type="info" ww1>填写发票抬头</el-tag>
      <p fz-14="" class="tit">
        按照国税总局公告，自2017年7月1日起，增值税普通发票需填写纳税人识别号才能作为企业的合法税收凭证。请向贵单位财务确认是否需要填写。</p>
      <el-form
          :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm"
          :label-position="labelPosition"
      >

        <el-form-item label="发票类型" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="企业"></el-radio>
            <el-radio label="个人"></el-radio>
            <el-radio label="非企业性单位（政府机关、事业单位、军队、学校等非企业性组织）"></el-radio>
          </el-radio-group>
        </el-form-item>


        <el-form-item label="发票抬头" prop="name">
          <el-input v-model="ruleForm.name"   placeholder="请输入发票抬头"></el-input>
        </el-form-item>


        <el-form-item label="企业税号" prop="name">
          <el-input v-model="ruleForm.name"   placeholder="请输入企业税号（具体要求请详询贵单位财务部门）">
          </el-input>
        </el-form-item>

        <p blue  cur style="text-align: right;width: 55%;padding-bottom: 20px" @click="toggle">更多发票信息（选填）</p>
        <template v-if="show">
          <el-form-item label="公司地址" prop="name2">
            <el-input v-model="ruleForm.name2"   placeholder="请输入公司地址">
            </el-input>
          </el-form-item>
          <el-form-item label="公司电话" prop="name2">
            <el-input v-model="ruleForm.name2"   placeholder="请输入公司电话">
            </el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="name2">
            <el-input v-model="ruleForm.name2"   placeholder="请输入开户银行">
            </el-input>
          </el-form-item>

          <el-form-item label="银行账号" prop="name2">
            <el-input v-model="ruleForm.name2"   placeholder="请输入银行账号">
            </el-input>
          </el-form-item>

        </template>


        <el-tag type="info" ww1>填写配送信息</el-tag>
        <p fz-14 class="tit" style="padding-bottom: 16px">发票成功开具后将通过邮件发送给您，且仅发送一次，请您准确输入电子邮箱</p>
        <el-form-item label="电子邮箱" prop="name">
          <el-input v-model="ruleForm.name"   placeholder="请输入电子邮箱">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<!--          <el-button @click="resetForm('ruleForm')">重置</el-button>-->
        </el-form-item>


      </el-form>



    </div>





  </div>
</template>

<script>
export default {
  name: "EditPro",

  data() {
    return {
      labelPosition: 'left',
      show: false,
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        name2: ''
      },
      rules: {
        name: [
          { required: true, message: '', trigger: 'blur' },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }


    };
  },

  methods: {
    goBack() {
      this.$router.go(-1)
    },

    toggle(){
      this.show = !this.show
    }

  }

}
</script>

<style scoped>
.edit-form >>> .el-button--primary{
  padding: 12px 80px !important;
}
.edit-form{
  padding-top: 20px;
}
.tit{
  color: var(--color-black);
  padding-top: 16px;
}
.edit-form >>> .el-tag.el-tag--info{
 height: 42px;
  line-height: 42px;
  font-size: var(--content);
}
.edit-form >>> .el-input{
  width: 50%;
}
</style>
